import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      username: 'coderwhy',
      password: 'abcd',
    }
  }

  handleSubmitClick(e) {
    console.log(this.state.username)

    // 阻止默认行为
    e.preventDefault()
  }

  changeForm(e) {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  render() {
    const { username, password } = this.state

    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          <input
            type="text"
            onChange={(e) => this.changeForm(e)}
            name="username"
            value={username}
          />
          <input
            type="password"
            value={password}
            name="password"
            onChange={(e) => this.changeForm(e)}
          />
          <button>提交</button>
        </form>
        <h2>{username + '' + password}</h2>
      </div>
    )
  }

  inputChange(e) {
    // console.log(e, e.target.value)
    this.setState({ username: e.target.value }, () => {
      console.log(this.state.username)
    })
  }
}

export default App
